<template>
  <div class="dashboard-container">
    <el-header>
      <div>
        <!--头部区域-->
        <img src="../assets/images/login_icon.png" alt="login_icon" />
        <span>微信小程序商家管理平台</span>
      </div>
      <el-button type="info" @click="logout">退出</el-button></el-header
    >
    <div class="dashboard-main">
      <div class="title-data">
        <div class="calendar">{{ hour }}:{{ minutes>10 ? minutes:"0"+minutes }}</div>
        <div class="text">
          <div class="title">您好，{{ name }}</div>
          <div
            class="date"
          >{{ date.getFullYear() }}-{{ date.getMonth() + 1 }}-{{ dates[2] }}&nbsp;&nbsp;&nbsp;星期{{ week.charAt(date.getDay()) }}</div>
        </div>
      </div>
      <div class="body-content">
        <div
          class="index-item"
          v-for="(item, index) in iconList"
          :key="index"
          @click="listClick(index, item)"
        >
          <div class="index-item-title">{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      name: '',
      urls: [],
      dates: [],
      date: '',
      hour: '',
      minutes: '',
      week: '日一二三四五六',
      iconList: [
        { name: '角色列表', path: '/users' },
        { name: '权限列表', path: '/Rights' },
        { name: '商品列表', path: '/goods' },
        { name: '分类参数', path: '/params' },
        { name: '商品分类', path: '/categories' },
        { name: '订单列表', path: '/orders' }
      ]
    }
  },
  created() {
    this.name=localStorage.getItem("username");
    this.getDate()
    this.getMenuList()
    let _this = this
    this.timer = setInterval(() => {
      _this.getDate()
    }, 500)
  },
  mounted() {
    this.dates = this.date.toDateString().split(' ')
  },
  methods: {
    logout() {
      window.sessionStorage.clear() /* 清除保存到客户端的 token */
      this.$router.push('/login') /* 重新回到 login 页面 */
    },
    getDate() {
      this.date = new Date()
      this.hour = this.date.getHours()
      this.minutes = this.date.getMinutes()
    },
    // 获取所有菜单
    async getMenuList(){
      this.list=[]
      const {data:res}=await this.$http.get('menus')     /* 获得接口中的 menus */
      if(res.meta.status!==200) return this.$message.console.error(res.meta.msg);
      this.menulist=res.data
      var storage=window.localStorage;
      res.data.forEach(item => {
        this.list.push(item.authName);
        item.children.forEach(item1 => {
        this.list.push(item1.authName)
      });
      });
      storage["menulist"]=this.list
    },
    listClick(index, item) {
      let list = localStorage.getItem("menulist");
      if (list.indexOf(item.name) == -1) {
        this.$message.warning('抱歉，你当前角色没有查看权限！')// 无该模块下菜单权限
      } else {
        this.$router.push(item.path)
      }
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>
<style lang="less" scoped>
.dashboard-container {
  width: 100%;
  min-height: 100%;
  background: url("../assets/dashboard/index_bg.png") no-repeat left top;
  .el-header {
  background-color: #0f426b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  > div {
    display: flex;
    align-items: center;
    height: 30px;
    span {
      margin-left: 15px;
    }
    img {
      height: 100%;
      background-repeat: no-repeat;
      background-position: left center;
      margin: 0 2px 0 7px;
    }
  }
}
  .dashboard-main {
    width: 65%;
    margin: 0 auto;
    .title-data {
      display: flex;
      margin-bottom: 30px;
      padding-top: 100px;
      .calendar {
        color: #fff;
        font-size: 40px;
      }
      .text {
        color: #fff;
        margin-left: 32px;
        .title {
          height: 30px;
          line-height: 30px;
          font-size: 20px;
          font-weight: bold;
        }
        .date {
          height: 22px;
          line-height: 22px;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
    .body-content {
      display: flex;
      flex-wrap: wrap;
      .index-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        width: 340px;
        height: 270px;
        margin-bottom: 20px;
        box-sizing: border-box;
        &:not(:nth-child(3n + 3)) {
          margin-right: 20px;
        }
        background: url("../assets/dashboard/index_icon1.png") no-repeat left top;
        background-size: 340px 270px;
        padding: 50px;
        color: #fff;
        font-size: 20px;
        &:nth-child(2) {
          background-image: url("../assets/dashboard/index_icon2.png");
        }
        &:nth-child(3) {
          background-image: url("../assets/dashboard/index_icon3.png");
        }
        &:nth-child(4) {
          background-image: url("../assets/dashboard/index_icon8.png");
        }
        &:nth-child(5) {
          background-image: url("../assets/dashboard/index_icon5.png");
        }
        &:nth-child(6) {
          background-image: url("../assets/dashboard/index_icon6.png");
        }
        .index-item-title {
          margin-top: 50px;
        }
      }
    }
  }
}
</style>
